<template>
	<div class="robbot_item_view">
		<!-- 矿机列表 -->
		<div v-if="kjlist" class="robbot_item" v-for="item,index in kjlist" :key="index">
			<div class="ri_num">{{index + 1}}</div>
			<div class="ri_top">
				<span>{{item.name}}</span>
				<span v-if="item.money == 0">新用户赠送</span>

				<span v-else>价格:{{item.money}}</span>
			</div>

			<div class="ri_center">
				<span>收益值:{{item.chanchu}}</span>
				<span>算力:{{item.suanli}}</span>
			</div>

			<div class="ri_bottom" @click="">

				<span v-if="tab_index == 0">周期:{{item.zhouqi}}天</span>

				<span v-if="tab_index == 1">{{item.tjmsg}}</span>

				<!-- 购买列表 -->
				<div v-if="tab_index == 0">

					<div class="rib_btn" v-if="item.money == 0" @click="getkj(item,index)" :style="item.havezige != 1 ? 'color:white;background:#8F959B' : ''">{{item.havezige == 0 ? '未达标' : item.havezige == 1 ? '领取' : '已领取'}}</div>
					<!-- <div class="rib_btn" v-if="item.money == 0" @click="getkj(item,index)" :style="item.zt == 0 ? 'color:white;background:#8F959B' : ''">{{item.zt == 0 ? '已领取' : '领取'}}</div> -->

					<div class="rib_btn" v-else @click="open(item.id,item.name,item.money)">购买</div>

				</div>

				<!-- 领取列表 -->
				<div v-if="tab_index == 1">

					<div class="rib_btn" @click="getkj(item,index)" :style="item.havezige != 1 ? 'color:white;background:#8F959B' : ''">{{item.havezige == 0 ? '未达标' : item.havezige == 1 ? '领取' : '已领取'}}</div>

				</div>

			</div>
		</div>

		<!-- 宠物列表 -->
		<div v-if="petslist" class="robbot_item" v-for="item,index in petslist" :key="index">
			<div class="ri_num" style="top: .5rem;">{{index}}</div>

			<div class="ri_top">
				<span>{{item.name}}</span>
				<span v-if="item.money == 0">新用户赠送</span>

				<span v-else>价值:{{item.jz_beg}}-{{item.jz_end}}</span>
			</div>

			<div class="ri_bottom" @click="">

				<div>
					<p>收益值:{{item.shouyi}}%/{{item.days}}天</p>
					<p>抢购时间:{{item.opt_beg}}-{{item.opt_end}}</p>
					<p>预约:{{item.xh_yy}}BTB</p>
				</div>

				<div class="rib_btn" v-if="item.money == 0" @click="getkj(item,index)" :style="item.zt == 0 ? 'color:white;background:#8F959B' : ''">{{item.zt == 0 ? '已领取' : '领取'}}</div>

				<div class="rib_btn" v-else @click="yuyue(item.xh_yy,item.name,item.dw_id)">预约</div>
			</div>
		</div>

		<!-- 待匹配宠物列表 -->
		<div v-if="petsMatchingList" class="robbot_item" v-for="item,index in petsMatchingList" :key="index">
			<div class="ri_num" style="top: .5rem;">{{index + 1}}</div>

			<div class="ri_top">
				<span>{{item.dw.name}}</span>
				<!-- <span v-if="item.money == 0">新用户赠送</span> -->

				<span>价值:{{( Number(item.price) ).toFixed(2)}}</span>
			</div>

			<div class="ri_bottom" @click="">

				<div>
					<p>收益值:{{item.dw.shouyi}}%/{{item.dw.days}}天</p>
					<p>抢购时间:{{item.dw.opt_beg}}-{{item.dw.opt_end}}</p>
					<p>预约:{{item.dw.xh_yy}}BTB</p>
				</div>

				<div class="rib_btn" v-if="item.money == 0" @click="getkj(item,index)" :style="item.zt == 0 ? 'color:white;background:#8F959B' : ''">{{item.zt == 0 ? '已领取' : '领取'}}</div>

				<div class="rib_btn" v-else @click="duihuan(item)">兑换</div>
			</div>
		</div>

		<TipsPopup ref="TipsPopup">
		</TipsPopup>

		<BuyRobot ref="BuyRobot"></BuyRobot>

		<!-- 宠物兑换操作弹窗 -->
		<van-popup v-model="showPicker" position="bottom" get-container="body">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"  @change="onChange" />
		</van-popup>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Picker
	} from 'vant';

	Vue.use(Picker);

	//提示
	import TipsPopup from './TipsPopup.vue'
	//购买
	import BuyRobot from './BuyRobot.vue'
	export default {
		name: "RobotItem",
		components: {
			TipsPopup,
			BuyRobot
		},
		props: {
			//矿机列表
			kjlist: {
				default: ""
			},
			petslist: {
				default: ""
			},
			petsMatchingList: {
				default: ""
			},
			tab_index: {
				default: 0
			}
		},
		data() {
			return {
				// 兑换参数
				post_data:{
					id:'',
					type:0
				},
				
				// 点击兑换弹窗
				showPicker: false,


				columns: [{
						text: '出售',
						type:0
					},
					{
						text: '转让成BTS币',
						type:1
					},
					{
						text: '兑换成购物券',
						type:2,
						disabled: true
					},
				],

				//领取拦截
				get_status: true

			}
		},
		methods: {
			// 兑换时切换
			async onChange(picker, values){
				this.post_data.type = values.type
			},
			
			// 宠物待匹配列表兑换
			async onConfirm(value) {
				
				try{
					
					const data = await this.$apis.Pets.duihuanbtb(this.post_data)
					
					this.$toast(data.msg)
					
				}catch(e){
					
					this.$toast(e.msg)
					//TODO handle the exception
				}
					
				this.showPicker = false
				
			},
			// 待匹配兑换功能
			duihuan(item) {
				
				this.post_data.id = item.w_id
				
				this.showPicker = true

			},
			// 宠物预约
			yuyue(money, name, dw_id) {

				this.$refs.TipsPopup.open({
					title: "预约宠物",
					textType: "html",
					text: `
						<p style="text-align:center">即将花费` + money + `BTB预约</p>
						<p style="text-align:center">` +
						name + `宠物</p>
					`,
					button: true,
					buttonText: "确认",
					// 传给按钮的函数
					methods: async () => {
						try {

							const data = await this.$apis.Pets.yuling({
								dw_id: dw_id
							})

							this.$toast(data.msg)

							setTimeout(() => {
								this.$refs.TipsPopup.tpShow = false
							}, 1500)
						} catch (e) {

							if (e.nobank) setTimeout(() => {
								this.$router.push("/authentication")
							}, 1500)

							this.$toast(e.msg)
							//TODO handle the exception
						}
					}
				})
			},
			//矿机购买弹窗显示
			open(id, name, money) {
				this.$refs.BuyRobot.open(id, name, money)
			},
			//矿机领取
			async getkj(item, index) {

				if (!this.get_status) {
					return
				}

				this.get_status = false

				try {

					const data = await this.$apis.Common.getkj({
						id: item.id
					})

					// this.$toast(data.msg)

					this.kjlist[index].havezige = 0

					this.$refs.TipsPopup.open({
						text: "领取成功！",
						// text:`
						// 	<p>一级会员：手续费为45%。</p>
						// 	<p>二级会员：【直推30人，达到矿机购买120人】手续费30%。</p>
						// 	<p>三级会员：【直推60人，达到矿机购买480人】手续20%。</p>
						// 	<p style="color:#00FECA">*最终出售数量为扣除手续费后剩余数量。</p>
						// `,
						button: true,
						buttonText: "去看看",
						// 定义按钮调用的方法
						methods: () => {
							this.$router.push("/robot")
						}
					})

					setTimeout(() => {
						this.get_status = true
					}, 1500)

				} catch (e) {

					// this.$toast(e.msg)
					this.$refs.TipsPopup.open({
						title: "很遗憾",
						text: e.msg,
						textType: "text",
					})

					setTimeout(() => {
						this.get_status = true
					}, 1500)
					//TODO handle the exception
				}

			}
		}
	}
</script>

<style lang="less">
	.robbot_item_view:last-child {
		margin-bottom: 1.2rem;
	}

	.robbot_item_view {
		width: 100%;
		padding: 0 .41rem 0 .3rem;
		box-sizing: border-box;

		.robbot_item {
			margin-bottom: .15rem;
			padding: .28rem .64rem .35rem 1.2rem;
			box-sizing: border-box;
			position: relative;
			width: 6.8rem;
			height: auto;
			background-image: url(../assets/components/RobotItem_bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			color: #94E9FF;

			.ri_num {
				position: absolute;
				top: .43rem;
				left: .38rem;
				font-size: .4rem;
				color: #0BB6DB;
			}

			.ri_top {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				font-size: .32rem;

				>span:nth-child(2) {
					color: #00FECA;
					font-size: .24rem;
				}
			}

			.ri_center {
				margin-top: .2rem;
				font-size: .24rem;

				>span:nth-child(2) {
					margin-left: 1rem;
				}
			}

			.ri_bottom {
				margin-top: .08rem;
				font-size: .24rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.rib_btn {
					color: black;
					width: 1.2rem;
					height: .45rem;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					border-radius: .1rem;
					text-align: center;
					line-height: .45rem;
				}

				div {

					>p:nth-child(2) {
						margin: .1rem 0;
					}
				}

			}

		}


	}
</style>
